<template>
	<button @click="handleClick">数据覆盖</button>
	<button @click="handleClick1">随机移动</button>
	<TransitionGroup tag="ul" name="fade" class="container">
		<div v-for="item in items" class="item" :key="item">
			{{ item }}
		</div>
	</TransitionGroup>

	<div class="btn-container">
		<Transition name="slide-up">
			<button v-if="docState === 'saved'" @click="docState = 'edited'">Edit</button>
			<button v-else-if="docState === 'edited'" @click="docState = 'editing'">Save</button>
			<button v-else-if="docState === 'editing'" @click="docState = 'saved'">Cancel</button>
		</Transition>
	</div>
	<div class="card">
		<div class="header">
			<div class="btn" @click="docState = 'saved'">上一步</div>
			<div class="title">确认部件信息</div>
			<div class="btn" @click="docState = 'edited'">下一步</div>
		</div>
		<Transition name="slide-up">
			<div v-if="docState === 'saved'" class="content">
				<div class="card-item" v-for="item in 4" :key="item">
					<div class="name">标题标题</div>
					<div class="des">描述描述描述描述描述描述</div>
				</div>
			</div>
			<div v-else-if="docState === 'edited'" class="content">
				<div class="card-item" v-for="item in 5" :key="item">
					<div class="name">标题标题</div>
					<div class="des">描述描述描述描述描述描述</div>
				</div>
			</div>
		</Transition>

	</div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])

const docState = ref('saved')
function handleClick() {
	items.value = [2, 3, 4, 5, 6, 7, 8, 9, 1]
}
function handleClick1() {
	const i = Math.floor(Math.random() * items.value.length)
	const item = items.value[i]
	items.value.splice(i, 1)
	items.value.push(item)
}

</script>



<style lang="less" scoped>
.container {
	position: relative;
	padding: 0;

	.item {
		position: relative;
		width: 100%;
		height: 30px;
		background-color: #f3f3f3;
		border: 1px solid #666;
		box-sizing: border-box;
	}
}

.fade-move {
	transition: transform 1s;
	z-index: 1;

	&:last-child {
		z-index: 0;
	}
}

.btn-container {
	display: inline-block;
	position: relative;
	height: 1em;

	button {
		position: absolute;
	}


}

.slide-up-enter-active,
.slide-up-leave-active {
	position: absolute;
	transition: all 0.4s ease-out;
}

.slide-up-enter-from {
	opacity: 0;
	transform: translateX(100%);
}

.slide-up-leave-to {
	opacity: 0;
	transform: translateX(-100%);
}

.card {
	width: 375px;
	height: 572px;
	overflow-x: hidden;
	padding: 12px 16px 40px;
	background: #F1F4F6;
	border-radius: 16px 16px 0px 0px;
	position: relative;

	.header {
		display: flex;
		justify-content: space-between;

		.title {
			font-weight: 600;
			font-size: 16px;
		}

		.btn {
			color: #246FE5;
			cursor: pointer;
		}
	}

	.content {
		// position: absolute;
		// width: calc(100% - 32px);
		width: 100%;
		margin-top: 24px;
		padding: 0 16px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 8px;

		.card-item {
			padding: 12px 0;
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: none;
			}

			.des {
				margin-top: 4px;
				color: #8B949E;
				font-size: 14px;
			}
		}
	}
}</style>